import React, { useState, useEffect } from 'react';  
import '../ccss/Lun.css';  
  
const Lun = () => {  
  const [currentSlide, setCurrentSlide] = useState(0);  
  const slides = [  
   { city: '北京', enterprise:'百度', post: '经理',salary:"19k" },  
    { city: '北京', enterprise:'小米', post: '程序员',salary:"15k" },  
    { city: '天津', enterprise:'字节跳动', post: '外包员工',salary:"13k" },
    { city: '杭州', enterprise:'腾讯公司', post: '程序员',salary:"12k" },  
    { city: '重庆', enterprise:'91传媒', post: '经理',salary:"25k" },  
    { city: '深圳', enterprise:'大象集团', post: '面试官',salary:"8k" }, 
     { city: '西安', enterprise:'广仔娱乐', post: '总经理',salary:"18k" }, 
  ];  
  
  // 计算要显示的幻灯片索引，为了显示6条，我们需要显示当前slide的前后各2条  
  const visibleSlides = [];  
  for (let i = -2; i <= 3; i++) {  
    // 确保索引在slides数组范围内  
    const slideIndex = (currentSlide + i + slides.length) % slides.length;  
    visibleSlides.push(slideIndex);  
  }  
  
  useEffect(() => {  
    const interval = setInterval(() => {  
      setCurrentSlide((prevSlide) => (prevSlide === slides.length - 1 ? 0 : prevSlide + 1));  
    }, 2500); // 每2.5秒切换一次  
  
    return () => clearInterval(interval); // 组件卸载时清除定时器  
  }, []);  
  
  return (  
    <div className="carousel-container">  
      <div className='octop'>
           <span>城市</span>  
            <span>就职企业</span>  
            <span>岗位</span>  
            <span>薪资</span>  
        </div>
      {visibleSlides.map((slideIndex) => (  
        
        <div  
          key={slideIndex}  
          className={`carousel-slide ${slideIndex === currentSlide ? 'active' : 'inactive'}`}  
          // 注意：这里没有设置backgroundImage，因为您的slides数据中没有image属性  
        >  
      
          <div className={`slide-title ${slideIndex !== currentSlide ? 'preview' : ''}`}>  
            <span>{slides[slideIndex].city}</span>  
            <span>{slides[slideIndex].enterprise}</span>  
            <span>{slides[slideIndex].post}</span>  
            <span>{slides[slideIndex].salary}</span>  
          </div>  
        </div>  
      ))}  
    </div>  
  );  
};  
  
export default Lun;